﻿﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拓扑文件库</title>
		<link rel="stylesheet" href="./css/css.css">
		<link rel="stylesheet" href="./css/leftBar.css">
		<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="./css/tflibrarystyle.css" />
		<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="./js/messagecenter.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		<script type="text/javascript" src="./js/jquery.page.js"></script>
		<link rel="stylesheet" href="./css/jquery.page.css">
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		  cursor:pointer;
		  margin-left:20px;
		}
		.app_text1{
			color:#04A0E9;
		  	cursor:pointer;
		}
		.page-split input{
			display:inline;	
			margin:0px 4px;
		}
		.app_del{
		  cursor:pointer;
		  margin-left:20px;
	        color: #414B54;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 14px;
			font-size:12px;
		}
		.text_name{
			text-align:left;
			text-indent: 14px;
			font-size:13px;
		}
		.app_no{
		    background-color: #83BE00;
		    width: 50px;
		    height: 18px;
		    margin-left: 16%;
		    text-indent: 4px;
		    border-radius: 4px;
		    color: #FFFFFF;
	        font-weight: 600;
		 	padding-top: 0px;
		}
		.headerTableDiv3 table tr td{
			border:1px solid #2E6A89;
		}
	</style>	
	</head>
	<body>
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu" onclick="window.location.href='physical_topology_library';" style="background-color:#04A0E9;color:#FFFFFF;border-top:1px solid #FFFFFF;">拓扑文件库</div>
			<div class="left_menu" onclick="window.location.href='logical_application_library';">逻辑预案库</div>
			<div class="left_menu" onclick="window.location.href='deploy_topology_library';">部署库</div>
			<div class="left_menu monitor">监控</div>
			<div class="left_menu level2" >
				<div class="level2Border" onclick="window.location.href='physical_monitors';">
					物理监控
				</div>
			</div>
			<div class="left_menu level2" >
				<div class="level2Border" onclick="window.location.href='logical_monitors';">
					逻辑监控
				</div>
			</div>
			<div class="left_menu other">其他</div>
			<div class="left_menu  level22" >
				<div class="level22Border" onclick="window.location.href='commonCMD';">
					我的常用命令
				</div>
			</div>
			<div class="left_menu level22" >
				<div class="level22Border" onclick="window.location.href='generalCMD';">
					命令模板
				</div>
			</div>
		</div>
		<form th:action="@{/logout}" method="post" >
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDk账号</div>
			<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
			<button class="login"  type="submit">注销</button>
		</div>
	</form>
	</div>
	<div class="right_content" >
			<form id="form1">
				<input type="hidden" id="curIndex" value="0"/>
				<input type="hidden" id="maxPage" value="0"/>
				<input type="hidden" id="curId" name="curId">
				<input type="hidden" id="returnUrl" name="returnUrl" value='/physical_top_all_view'>
				<input type="hidden" id="id" name="id">
				<input type="hidden" id="name" name="name">

					<div class="top-bar">	
						<div style="float:left;">拓扑文件库<br>
							<span  class="text_color"  style="font-size: 13px;">Topological&nbsp;file&nbsp;library</span>
						</div>	
						<div class="top_input" style="float:right; height:36px;margin-top: 12px;">
			      			<button type="button" style="margin-left:20px;border-radius: 5px;" onclick="open_pop()">+添加</button>
			      			<button type="button" style="margin-left:20px;border-radius: 5px;" onclick="open_pop2()">导入</button>
			      			<button type="button" class="search">搜索</button>
							<input class="s_input" type="text" id="condition" placeholder="输入关键字搜索"/>
						</div>			
					</div>
					<div class="table-box" >
						<div class="headerTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
								<colgroup>
									<col width="10%">
									<col width="15%">
									<col width="8%">
									<col width="12%">
									<col width="12%">
									<col width="16%">
									<col width="27%">
								</colgroup>
								<tr>									
									<td>
										<div class="text_name" style="">编号</div>
										<div class="text_color">Serial&nbsp;number</div>
									</td>
									<td>
										<div class="text_name" style="">名称</div>
										<div class="text_color">The&nbsp;application&nbsp;name</div>
									</td>
									<td>
										<div class="text_name" style="">创建人</div>
										<div class="text_color">founder</div>
									</td>
									<td>
										<div class="text_name" style="">创建时间</div>
										<div class="text_color">Creation&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">修改时间</div>
										<div class="text_color">Modify&nbsp;the&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">描述</div>
										<div class="text_color">Project&nbsp;description</div>
									</td>
									<td>
										<div class="text_name"style="text-indent: 25px;">操作</div>
										<div class="text_color" style="text-indent: 25px;">operation</div>
									</td>
								</tr>	
							</table>
						</div>
						<div class="contentTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
								<colgroup>
									<col width="10%">
									<col width="15%">
									<col width="8%">
									<col width="12%">
									<col width="12%">
									<col width="16%">
									<col width="27%">
								</colgroup>
							<tbody id="contentTableTbody"></tbody>
							</table>
						</div>					 
				</div>				
				<!-- 分页 -->
				<div class="page-split">
		            <div id="page" style="float:left;"></div>
		            <div class="page_count text_color" style="float:right;font-size:13px;">共0条/0页</div>
		        </div>
				<!-- 弹窗 -->
				<div class="pop_content" id="showInfo">
					<div class="pop_block" >
					<div class="pop_barInfo" >
						<div style="font-size: 18px;color:#424B52;">添加物理拓扑</div>
						<span style="color:#999999;">Create&nbsp;a&nbsp;topological&nbsp;library</span>
					</div>
					<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop();"></div>
					<div class="create_new">
						<div class="f1">
							<div style="color:#5F6C74;">名称&nbsp;:</div>
							<div><input id="phyname" type="text" placeholder="输入名称"></div>
						</div>
						
						<div class="f2" style="top:80px;">
							<div style="color:#5F6C74;">备注&nbsp;:</div>
							<div style="width:90%;"><textarea id="note" class="contentTextTextArea" placeholder="输入备注信息"></textarea></div>
						</div>
					</div>
					<div class="bt-btn" style="position: absolute;width:100%;bottom:20px;left:10px;">
						<button class="btn-s disSave" type="button" onclick="dissave();">取消</button>
						<button class="btn-s save" style="margin-left: 15px;" type="button" onclick="savePhy();">保存</button>
					  </div>
				</div>
				</div>
				
				<!-- 新增拓扑文件 -->
				<div class="pop_content2" id="showInfo2">
					<div class="pop_block2" >
					<div class="pop_barInfo2" >
						<div style="font-size: 18px;color:#424B52;">添加部署文件</div>
						<span style="color:#999999;">Create&nbsp;a&nbsp;topological&nbsp;library</span>
					</div>
					<div class="exit_pop2" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
					<div class="create_new2">
						<div class="f12">
							<div style="color:#5F6C74;">名称&nbsp;:</div>
							<div><input id="topName" type="text" placeholder="输入名称"></div>
						</div>
						
						<div class="f22" style="top:80px;">
							<div style="color:#5F6C74;">备注&nbsp;:</div>
							<div style="width:90%;"><textarea id="note" class="contentTextTextArea2" placeholder="输入备注信息"></textarea></div>
						</div>
					</div>
					<div class="bt-btn2" style="position: absolute;width:100%;bottom:20px;left:10px;">
						<button class="btn-s disSave" type="button" onclick="disexcute()">取消</button>
						<button class="btn-s save" style="margin-left: 15px;" type="button" onclick="addSave();">保存</button>
					  </div>
				</div>
				</div>
				
			  <div class="pop_content2" id="showInfo3">
					<div class="pop_block2" style="top: 35%;left: 35%;width: 600px;" >
					<div class="create_new2" style="top: 50px;left: 80px;height: 130px;">
						<div class="f12">
							<div style="color:#5F6C74;">拓扑名称&nbsp;:</div>
							<div><input id="importTopName" type="text" placeholder="输入名称" style="margin-left:20px;height:30px;padding-left:10px;"></div>
						</div>
						<div class="f22" style="top:80px;">
							<div style="color:#5F6C74;">导入文件&nbsp;:</div>
							<input type="text" value="" id="fileName" placeholder="未选择任何文件" style="width: 150px;border: 1px solid #ddd;height: 30px;line-height: 30px;padding: 0 10px;float: left; margin-left: 20px;" readOnly="readOnly" />
							<input id="uploadFile" type="file" onchange="changeWj(this)" style="display: none;" multiple/>
							<button type="button" onclick="$(this).prev().click();" style="padding: 0 20px;border-radius: 5px;font-size: 14px;margin-left: 10px;background: #00A0E8;height: 30px;float: left;color:#FFFFFF;">选择</button>
						</div>
					</div>
					<div class="bt-btn2" style="position: absolute;width:250px;bottom:10%;right:5%;">
						<button class="btn-s save" style="margin-left: 15px;width:80px;" type="button" onclick="dr();">导入</button>
						<button class="btn-s disSave" type="button" onclick="closeDiv()" style="width: 80px;">取消</button>
					 </div>
				</div>
				</div>
				
			</form>
		</div>

	</body>
	<script type="text/javascript">
	
	
	$(function(){
            $(".search").on("click",function(){
                var curIndex = $("#curIndex").val();
                var name_like = $("#condition").val();
                getList(curIndex,name_like);
            });
        });
        function addSave(){
        	var id = $("#id").val();
        	if($("#topName").val()==''){
        		alert("部署库名不能为空 ");
        	}
            var url='[[@{/deploy_topology/save}]]';
            var param = {
                "name": $("#topName").val(),
                "no": "0",
                "remark": $("#topRemark").val(),
                "physicalTopology":{id:id},
                "creator":"1"
            };
            param = JSON.stringify(param);
            $.ajax({
                url:url,
                data: param,
                dataType:"JSON",
                type:"POST",
                contentType:"application/json",
         	    async:false
            }).done(function(data){
                if(data&&data.success){
                    alert("添加成功");
                    location.href="deploy_topology_library";
                }
            });
        }
        function dissave(){
            $("#showInfo").hide();
        }
        function disexcute(){
            $("#showInfo2").hide();
        }
      
	function edit(id){
		var url='[[@{/new_machines_and_boardors}]]';
        $("#curId").val(id);
        $("#form1").attr({action:url,method:"GET"}).submit();
	}
	function delete2(id){
		var url = "[[@{/physical_topology/delete}]]";
		if(id!=null) {
			var flag = confirm("确定要删除吗?");
			if(flag){
				$.post(url, {id: id}, "JSON").done(function (data) {
				    if (data.success) {
						alert("删除成功");
						location.reload();
					}
				});
			}
        }else {
			alert("请选择要删除的id");
		}
	}
	function set(id){
		$("#id").val(id);
		$("#showInfo2").show();
	}
	//加载列表 
    var allData=[];
    $(function () {
    	getList();
    });
   function getList(curIndex,name_like){
       var url = "[[@{/physical_topology/query}]]";
       var param = {
           "pageable.page":curIndex,
           "pageable.size":25,
           "pageable.sort":"[{'property':'cdt','direction':'desc'}]",
           "params.name_like":name_like,
           "enabled":1
       };
       $.ajax({
    	   url:url,
    	   data:param,
    	   dataType:"JSON",
    	   type:"POST",
    	   async:false
       }).done(function(data){
           if(data){
               var dataList = data.data;
               allData=dataList;
               if(dataList&&dataList.length>0){
                addData(dataList,dataList.length,25);
               }
           }
       });
   }
	/*列表*/
	function addData(data,total,pageMax){
        var maxPage = Math.ceil(total/pageMax);
        $("#maxPage").val(maxPage);
        pageCal(1,maxPage,total);
		$("#contentTableTbody").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td><div class="app_no">NO.'+(k+1)+'</div></td >';
			html += '<td><div class="app_text1" style="cursor:default;">'+v.name+'</div></td>';
			html += '<td><div class="text_color" style="text-indent: 0px;margin-left:5px;">'+v.creator+'</div></td>';
			html += '<td style="text-indent: 0px;"><div class="text_color" style="text-indent: 0px;margin-left:5px;">'+new Date(v.cdt).format("yyyy-MM-dd hh:mm:ss")+'</div></td>';
			if(v.lastModifyTime){
				html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:15px;">'+v.lastModifyTime+'</div></td>';
			}else{
				html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:15px;"></div></td>';
			}
			html += '<td ><div>'+v.remark+'</div></td>';
			html += '<td style="text-indent: 0px;">';
			html += '<a class="app_text view" style="margin-left:25px;" onclick="view('+v.id+',\''+v.name+'\');">预览</a>';
			html += '<a class="app_text update" style="margin-left:25px;" onclick="edit('+v.id+');">编辑</a>';
			html += '<a class="app_del delete" style="margin-left:25px;" onclick="delete2('+v.id+');">删除</a>';
			html += '<button type="button"  style="margin-left:20px;" onclick="set('+v.id+');">部署逻辑配置</button>';
			html += '</td>';
			html += '</tr>';
		});
		$("#contentTableTbody").append(html);
		tableSum();
	} 
	/*添加弹窗*/
	function open_pop(){
		$("#showInfo").show();
	}
	/*弹窗新增连接*/
	function savePhy(){
		var url="[[@{/physical_topology/save}]]";
		var phyname = $("#phyname").val();
		if(phyname==""){
			alert("请输入名称");
			return false;
		}
		var remark = $("#note").val();
		var param = 
		{
		  "enabled": true,
		  "machineBoxes": [],
		  "name": phyname,
		  "no": "0",
		  "remark": remark
		}
		param = JSON.stringify(param);
		
		$.ajax({
			url:url,
			data:param,
			type:"POST",
			contentType:"application/json",
			dataType:"JSON",
     	    async:false
		}).done(function(data){
			alert("保存成功!");
			location.reload();
		});
	}
	function exit_pop(){
		$("#showInfo").hide();
		
	}
	function exit_pop2(){
		$("#showInfo2").hide();
		
	}
	function view(id,name){
		$("#id").val(id);
		$("#name").val(name);
		$("#form1").attr({action:'[[@{physical_top_all_view}]]',method:"GET"}).submit();//跳转到物理拓扑全局预览
	}
	function tableSum() {
		$(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv").css("right",(30-scrollWidth)+"px");
		} else {
            $(".contentTableDiv").css("right", 30 + "px");

			$(".contentTableDiv table").css("width", "100%");
		}
		$(".contentTableDiv").scrollTop(0);// 滚动条返回顶部 
	}
	
	
	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}
	/*分页*/
    function pageCal(curIndex, pageCount, totalCount) {
			$("#page").Page({
			  totalPages: pageCount,//分页总数
			  liNums: 7,//分页的数字按钮数(建议取奇数)
			  activeClass: 'activP', //active 类样式定义
			  callBack : function(page){
					//console.log(page);
			        $("#contentTableTbody").empty();
					 var newAllData=[];
					for(var i=(page-1)*25;i<allData.length;i++){
						newAllData.push(allData[i]);
					}
					var html = '';
					$.each(data,function(k,v){
						html += '<tr>';
						html += '<td><div class="app_no">NO.'+(k+(page-1)*25) +'</div></td >';
						html += '<td><div class="app_text1" style="cursor:default;">'+v.name+'</div></td>';
						html += '<td><div class="text_color" style="text-indent: 0px;margin-left:5px;">'+v.creator+'</div></td>';
						html += '<td style="text-indent: 0px;"><div class="text_color" style="text-indent: 0px;margin-left:5px;">'+new Date(v.cdt).format("yyyy-MM-dd hh:mm:ss")+'</div></td>';
						if(v.lastModifyTime){
							html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:15px;">'+v.lastModifyTime+'</div></td>';
						}else{
							html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:15px;"></div></td>';
						}
						html += '<td ><div>'+v.remark+'</div></td>';
						html += '<td style="text-indent: 0px;">';
						html += '<a class="app_text view" style="margin-left:25px;" onclick="view('+v.id+',\"'+v.name+'\");">预览</a>';
						html += '<a class="app_text update" style="margin-left:25px;" onclick="edit('+v.id+');">编辑</a>';
						html += '<a class="app_del delete" style="margin-left:25px;" onclick="delete2('+v.id+');">删除</a>';
						html += '<button type="button"  style="margin-left:20px;" onclick="set('+v.id+');">部署逻辑配置</button>';
						html += '</td>';
						html += '</tr>';
					});
					$("#contentTableTbody").append(html);
					tableSum();
			  }
		  });
        $(".page-split .page_count").html('共' + totalCount + '条/' + pageCount + '页');
	}
    
    
	Date.prototype.format = function(fmt) { 
	     var o = { 
	        "M+" : this.getMonth()+1,                 //月份 
	        "d+" : this.getDate(),                    //日 
	        "h+" : this.getHours(),                   //小时 
	        "m+" : this.getMinutes(),                 //分 
	        "s+" : this.getSeconds(),                 //秒 
	        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
	        "S"  : this.getMilliseconds()             //毫秒 
	    }; 
	    if(/(y+)/.test(fmt)) {
	            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
	    }
	     for(var k in o) {
	        if(new RegExp("("+ k +")").test(fmt)){
	             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
	         }
	     }
	    return fmt; 
	}
	function showBig(){
		window.location.href="physical_monitors2"
	}
	
   /*导入文件 */  
	function open_pop2(){
		$("#showInfo3").show();
	}
	function changeWj(me){
		$("#fileName").val("");
		var files = me.files;
		var curFileName=files[0].name;
		if(curFileName.endsWith(".xml")){
			$("#fileName").val(curFileName);
		}else{
			alert("文件类型错误，请选泽.xml文件");
		}
	}
	function dr(){
		var importTopName=$("#importTopName").val();
		var fd = new FormData();
		var file = $("#uploadFile").get(0).files;
		if(file.length == 0){
			showMessage("请上传文件");
		}else{
			for(var i = 0 ; i < file.length ; i ++){
				fd.append("file" , file[i]);
			}
			$.ajax({
    	        type: "POST",
    	        contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
    	        processData: false, //必须false才会自动加上正确的Content-Type 
    	        url: '[[@{import_xml}]]',
    	        data: {file:fd,name:importTopName},
    	        dataType: "JSON",
    	        success: function (result) {
    	        	if(result == 1){
    	        		setTimeout(function(){
    	        			$("#showInfo3").hide();
        	    			closeDiv();
        	    			showMessage("上传成功");
   	        			} , 1500)
    	        	}else{
    	        		closeDiv();
    	        		showMessage("导入失败");
    	        	}
    	        }
    	    });
		}
	}
	function closeDiv(){
		$("#showInfo3").hide();
	}
	</script>
	<script type="text/javascript">
		//彈窗拖動
		$(function(){
			$(".pop_block").on({
			    mousedown: function(e){
			    	var obj = e.target;
	    			if(!$(obj).is("input")){
	    				var el=$(this);
		                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
		                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
	    			}
	            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
			$(".pop_block2").on({
			    mousedown: function(e){
			    	var obj = e.target;
	    			if(!$(obj).is("input")){
	    				var el=$(this);
		                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
		                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
	    			}
    			},
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		});
	</script>
	
</html>
